<template>
  <ElDescriptions :column="1" border>
    <ElDescriptionsItem label="服务名称" :min-width="80">
      <ElSelect v-model="data.microName">
        <ElOption label="<无>" value="" />
        <ElOption v-for="(micro, microName) in micros" :label="micro.label" :value="microName" :key="microName" />
      </ElSelect>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="模块名称">
      <ElSelect v-model="data.seedName">
        <ElOption label="<无>" value="" />
        <ElOption v-for="(seed, seedName) in seeds" :label="seed.label" :value="seedName" :key="seedName" />
      </ElSelect>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="功能名称">
      <ElSelect v-model="data.actionName">
        <ElOption label="<无>" value="" />
        <ElOption v-for="(action, actionName) in actions" :label="action.label" :value="actionName" :key="actionName" />
      </ElSelect>
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem, ElOption, ElSelect } from 'element-plus';
  import { PropsType } from '@/seed-application/components/save/DefaultSave.vue';
  import { computed, reactive, watch } from 'vue';
  import { currentApp } from '@/views/seed-dev';

  const micros = computed(() => currentApp.value?.micros || {})
  const seeds = computed(() => {
    const microName = data.microName
    if(microName) {
      return micros.value[microName].seeds
    } else {
      return currentApp.value.seeds
    }
  })
  const actions = computed(() => {
    const microName = data.microName
    const seedName = data.seedName
    if(seedName) {
      return microName ? currentApp.value.seeds[seedName].actions : currentApp.value.seeds[seedName].actions
    } else {      
      return microName ? currentApp.value.micros[microName].actions : currentApp.value.actions
    }
  })

  const data = reactive<PropsType>({actionName: ''})

  watch(() => data.microName, () => data.seedName = void 0)
  watch(() => data.seedName, () => data.actionName = void 0)
</script>